import React, {createRef} from "react"
import './index.scss'
import BScroll from 'better-scroll'
import {LoadingOutlined} from '@ant-design/icons'
export default class ScrollContent extends React.Component{
        constructor (props) {
                super (props);
                this.state = {
                        visibleTips:false
                }
                this.scroll = null
                this.scrollContent = createRef()
        }
        componentDidMount () {
                this.scroll = new BScroll(document.getElementById('scroll-content'),{
                        click:true,
                        probeType: 3,
                        pullUpLoad:{
                                threshold: 100,
                                stop:40
                        },
                })
                //上拉加载事件绑定
                this.scroll.on('pullingUp',()=>{
                        const {onUpload} = this.props
                        if (onUpload) {
                                onUpload()
                        }
                })
                //刷新提示文字提示显示隐藏
                this.scroll.on('scroll',pos=>{
                        if(pos.y>40||pos.y<-40){
                                this.setState({visibleTips:true})
                        }else{
                                this.setState({visibleTips:false})
                        }
                })

        }
        finishUpload=()=>{
                setTimeout(()=>{
                        this.scroll.refresh()
                        this.scroll.finishPullUp()
                },600)
        }
        render () {
                const {children,loading,loadingStatus,} = this.props
                const {visibleTips} = this.state
                return <div className='scroll-content-view' id='scroll-content' ref={this.scrollContent}>
                        <div className="scroll-container">
                                {children}
                        </div>
                        {
                                loading&&<div className={`bottom-tips ${visibleTips&&'visible'}`}>
                                        {loadingStatus?<div>暂无更多</div>:<div><LoadingOutlined />加载中...</div>}
                                </div>
                        }
                </div>
        }

}
